<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
    <link rel="stylesheet" href="css/reset.css">
    <link rel="stylesheet" href="css/common.css">
    <link rel="stylesheet" href="./css/customer.css">
    <title>客户案列</title>
</head>
<body>
    <header>
        <div class="claerFlex">
            <div class="left_box">
                <img src="./img/u160.png" alt="">
                <h3 class="margin_10 font_24">LOGO</h3>
            </div>
            <div class="right_box">
                <ul class="listStyle">
                    <li><a href="./index.html" >企业主页</a></li>
                    <li><a href="./product.html ">产品</a></li>
                    <li><a href="./programme.html" >解决方案</a></li>
                    <li><a href="./customer.html" class="active">客户案列</a></li>
                    <li><a href="./consult.html">咨询与服务</a></li>
                    <li><a href="./news.html">企业新闻</a></li>
                    <li><a href="./join.html">加入我们</a></li>
                </ul>
            </div>
        </div>
    </header>
    <div style="padding-top: 100px;"></div>
    <main>
        <div class="banner">
            <img src="./img/u201.png" alt="">
             <div class="cout_box">
                <p class="font_30">客户案例</p>
                <h3 class="font_33">致力于从技术、营销等多层面资源帮助伙伴成功</h3>
             </div>
        </div>
        <div class="custom_lsit">
            <div class="container claerFlex">
                <div class="left_list">
                    <ul>
                        <!-- <li>
                            <span class="active"></span>
                            <p class="font_24 font_lighter active">智慧交通</p>
                        </li>
                        <li>
                            <span class=""></span>
                            <p class="font_24 font_lighter ">智慧公安</p>
                        </li>
                        <li>
                            <span class=""></span>
                            <p class="font_24 font_lighter ">中央厨房</p>
                        </li>
                        <li>
                            <span class=""></span>
                            <p class="font_24 font_lighter ">在线教育</p>
                        </li> -->
                    </ul>
                </div>
                <div class="right_list">
                    <ul>
                        <!-- <li>
                            <p class="font_30 title">智慧交通</p>
                            <ul>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <p class="font_30 title">智慧公安</p>
                            <ul>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <p class="font_30 title">中央厨房</p>
                            <ul>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                            </ul>
                        </li>
                        <li>
                            <p class="font_30 title">在线教育</p>
                            <ul>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                                <li>
                                    <img src="./img/bd图_u1014.png" alt="">
                                    <p class="font_black"> 这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字</p>
                                    <a href="">了解详情</a>
                                </li>
                            </ul>
                        </li> -->
                    </ul>
                </div>
            </div>
        </div>
    </main>
    <footer>
        <div >
           <div class="count claerFlex">
                <div class="left">
                    <img src="./img/u115.png" alt="">
                    <h3 class="margin_10 font_33 font_white">LOGO</h3>
                </div>
                <div class="center">
                    <ul>
                        <li>
                            <h3 class="font_24">关于我们
                                <ul>
                                    <li>企业文化</li>
                                    <li>企业简介</li>
                                    <li>企业历程</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">企业产品
                                <ul>
                                    <li>企业产品1</li>
                                    <li>企业产品2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">解决方案
                                <ul>
                                    <li>解决方案1</li>
                                    <li>解决方案2</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">其他
                                <ul>
                                    <li>客户案列</li>
                                    <li>咨询与服务</li>
                                    <li>企业与新闻</li>
                                </ul>
                            </h3>
                        </li>
                        <li>
                            <h3 class="font_24">加入我们
                                <ul>
                                    <li>校园招聘</li>
                                    <li>社会招聘</li>
                                </ul>
                            </h3>
                        </li>
                    </ul>
                </div>
                <div class="right">
                    <ul>
                        <li>
                            <h3 class="font_24">微信公众号</h3>
                            <img src="./img/u139.png" alt="">
                        </li>
                        <li>
                            <h3 class="font_24">联系我们</h3>
                            <div>
                                <p>地址：北京市XX路XXX号XXX楼</p>
                                <p>电话：010-XXXXXXXX</p>
                                <p>邮箱：XXXXXXXX@163.com</p>
                            </div>
                        </li>
                    </ul>
                </div>
           </div>
           <p class="font_20 font_white">某某科技有限公司 版权所有 &copy2021-2031</p>
        </div>
    </footer>
</body>
<script src="./js/ajax.js"></script>
<script>
    window.onload = ()=>{
        // let data = [
        //     {
        //         title:'智慧交通',
        //         msg:[
        //             {
        //                 title:'智慧交通',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //             {
        //                 title:'智慧交通',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //             {
        //                 title:'智慧交通',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //         ]
        //     },
        //     {
        //         title:'智慧公安',
        //         msg:[
        //             {
        //                 title:'智慧公安',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //             {
        //                 title:'智慧公安',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //             {
        //                 title:'智慧公安',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //         ]
        //     },
        //     {
        //         title:'中央厨房',
        //         msg:[
        //             {
        //                 title:'中央厨房',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //             {
        //                 title:'中央厨房',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //             {
        //                 title:'中央厨房',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //         ]
        //     },
        //     {
        //         title:'在线教育',
        //         msg:[
        //             {
        //                 title:'在线教育',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //             {
        //                 title:'在线教育',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //             {
        //                 title:'在线教育',
        //                 img:'./img/bd图_u1014.png',
        //                 count:'这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字这是一段案例介绍文字',
        //                 src:'./customer_dail.html',
        //             },
        //         ]
        //     }
        // ]
        let tab_box = document.querySelector('.custom_lsit .left_list');
        let right_list = document.querySelector('.custom_lsit .right_list ul')
        get({
            type:'GET',
            url:'/v1/customer/list',
            success:function(res){
                if(res.code === 200){
                    console.log(res);
                    creaotr(res.data);
                }
            }
        })
        function creaotr(data){
            data.forEach((v,i)=>{
            let {title,msg} = v;
            let node = tab_box.firstElementChild;
            if(i===0){
                node.innerHTML += `
                <li>
                            <span class="active"></span>
                            <p class="font_24 font_lighter active">${title}</p>
                        </li>
            `
            }else{
                node.innerHTML += `
                <li>
                            <span class=""></span>
                            <p class="font_24 font_lighter ">${title}</p>
                        </li>
            `
            }
            right_list.innerHTML += `
                <li data-i='${title}'>
                    <p class='font_30 title'>${title}</p>
                    <ul></ul>
                    </li>
            `
            let ul = right_list.children[i].lastElementChild;
            msg.forEach((v,index)=>{
                ul.innerHTML+=`
                <li>
                                    <img src="${v.img}" alt="">
                                    <p class="font_black"> ${v.count}</p>
                                    <a href="${v.src}">了解详情</a>
                                </li>
            `
            })
            
            let tab_list = document.querySelectorAll('.custom_lsit .left_list li');
        tab_list.forEach((v,i)=>{
            v.addEventListener('click',(e)=>{
                // tab_list.forEach(v=>{
                //     v.firstElementChild.classList.remove('active');
                //     v.lastElementChild.classList.remove('active');
                // });
                // v.firstElementChild.classList.add('active');
                // v.lastElementChild.classList.add('active');
                let t = right_list.children[i].offsetTop
                window.scrollTo({
                    top: t-100,
                    behavior:'smooth',
                })
            })
        })
        function clearTab(i){
            tab_list.forEach(v=>{
                    v.firstElementChild.classList.remove('active');
                    v.lastElementChild.classList.remove('active');
                });
            try {
                tab_list[i].firstElementChild.classList.add('active');
                tab_list[i].lastElementChild.classList.add('active');
            } catch (error) {
                console.log(error)
            }
       
        }
        window.addEventListener('scroll',()=>{
            if(window.scrollY >= 600){
                tab_box.classList.add('fixe')
            }else{
                tab_box.classList.remove('fixe')
            }
            if(window.scrollY >= 629 && window.scrollY <1125){
                clearTab(0)
            }else if(window.scrollY >= 1125 && window.scrollY < 1621){
                clearTab(1)
            }else if(window.scrollY >=1621 && window.scrollY <1801){
                clearTab(2)
            }else if(window.scrollY >1800){
                clearTab(3)
            }
        })
        })
        }
    }
</script>
</html>